<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar yamm navbar-default nav-extended">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<b>LOGO</b>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li class="dropdown" >
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-hover="dropdown" data-animations="fadeIn fadeInLeft fadeInUp fadeInRight">Services <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-md-3">
<h5>Premium Services</h5>
<ul class="nav-menu">
<li><a href="#">24x7 Alerts</a></li>
<li><a href="#">Find My Chances</a></li>
<li><a href="#">Track My Application</a></li>
<li><a href="#">Meet a Councellor</a></li>
<li><a href="#">My Addmission Letter</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>NEETell Support</h5>
<ul class="nav-menu">
<li><a href="#">Rank Predictor</a></li>
<li><a href="#">Best Fit College</a></li>
<li><a href="#">College Rankings</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>MCI Bulletin</h5>
<ul class="nav-menu">
<li><a href="#">Colleges & Courses</a></li>
<li><a href="#">State Medical Council</a></li>
<li><a href="#">Internship Hospitals</a></li>
<li><a href="#">Tution Fee of Colleges</a></li>
<li><a href="#">NEET Notifications</a></li>
</ul>
</div>
<div class="col-md-3">
<h5>Social Services</h5>
<ul class="nav-menu">
<li><a href="#">Scholarship & Financial AID</a></li>
<li><a href="#">Discover-a-College</a></li>
<li><a href="#">Financial Assistance</a></li>
<li><a href="#">R.T.I Assistance</a></li>
<li><a href="#">Donate your Books</a></li>
<li><a href="#">Online Exam</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">NEET News & Blog <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Latest News</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
<li><a href="#">NEETell Academy</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="form-group search">
<input type="text" class="form-control" placeholder="Search">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
/* Navbar */
.nav-manage {
height: 54px;
}
.navbar-default {
border: none;
border-radius: 0px;
-webkit-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #ebebeb;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.navbar-brand {
max-width: 190px;
padding: 10px 15px;
}
.navbar-default .navbar-nav > li > a {
font-size: 14px;
font-weight: 600;
}
.nav-extended {
-webkit-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0);
box-shadow: 0px 0px 36px -8px rgba(0, 0, 0, 0);
}
.dropdown-menu {
padding: 15px 0px;
}
.dropdown-menu > li > a {
font-size: 13px;
padding: 6px 20px;
color: #959595;
}
.yamm-content ul.nav-menu {
list-style-type: none;
padding: 0px;
margin: 8px 0px 0px;
}
.yamm-content ul.nav-menu li {
padding-bottom: 3px;
}
.yamm-content ul.nav-menu li a {
font-size: 13px;
color: #959595;
position: relative;
left: 0px;
}
.yamm-content ul.nav-menu li a:hover {
left: 3px;
color: #fc6b02;
}
.breadcrumb-outer {
background-color: #f7f7f7;
border-bottom: 1px solid #ececec;
}
.breadcrumb-outer .breadcrumb {
border: none;
background-color: transparent;
margin-bottom: 0px;
font-size: 11px;
padding: 6px 0px;
}
.breadcrumb > li + li:before {
content: "\f105";
font-family: "fontawesome";
}
/*!
* Yamm!3 - Yet another megamenu for Bootstrap 3
* http://geedmo.github.com/yamm3
*
* @geedmo - Licensed under the MIT license
*/
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
}
.yamm .yamm-content {
padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
@media (min-width: 768px) {
ul.nav li:hover > ul.dropdown-menu {
display: block;
}
}